<template>
  <div class="toBanner" style="padding:0px 10px 10px 40px;width:88%">
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      :rules="rules"
      ref="bannerForm"
    >
      <el-form-item label="轮播图展示：" prop="medicalImg" style="width:100%">
        <el-upload
          class="avatar-uploader"
          :action="imgUpload"
          list-type="picture-card"
          :file-list="medicalImgList"
          :disabled="disabled"
          :on-success="medicalImgUpload"
          :on-remove="medicalImgRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文本标签：">
        <el-input v-model="formData.remarks"></el-input>
      </el-form-item>
      <div style="text-align:center">
        <el-form-item>
          <el-button
            type="primary"
            :disabled="disabled&&!isAdmin"
            @click="onSubmit"
          >{{bannerId?'更新':'提交'}}</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const imgRule = (rule, value, callBack) => {
      if (!this.formData.imageUrl || !this.formData.imageUrl.length) {
        return callBack(new Error("请上传药品图片"));
      } else {
        return callBack();
      }
    };
    return {
      disabled: false,
      formData: { name: "banner", imageUrl: [], remarks: "" },
      rules: {
        medicalImg: [{ required: true, validator: imgRule }]
      },
      medicalImgList: [],
      bannerId: null
    };
  },
  created() {
    this.getSysApplication();
  },
  methods: {
    onSubmit() {
      this.$refs["bannerForm"].validate(vali => {
        if (vali) {
          const param = this.deepClone(this.formData);
          param.imageUrl = JSON.stringify(param.imageUrl);
          if (!this.bannerId) {
            this.post(
              "/operation/insertSysApplication",
              param,
              res => {
                if (res.code == 200) {
                  this.$message.success("提交成功");
                  this.getSysApplication();
                }
              },
              false
            );
          } else {
            this.updateSysApplication();
          }
        } else {
          return false;
        }
      });
    },
    //获取轮播图
    getSysApplication() {
      this.formData = { name: "banner", imageUrl: [], remarks: "" };
      this.medicalImgList = [];
      this.post(
        "/operation/getSysApplication",
        { name: "banner" },
        res => {
          if (res.code == 200) {
            this.bannerId = res.data[0].id;
            JSON.parse(res.data[0].imageUrl).forEach(e =>{
              this.medicalImgList.push({url:e})
              this.formData.imageUrl.push(e);
            })
            // this.formData.imageUrl.push(JSON.parse(res.data[0].imageUrl)[0]);
            // this.medicalImgList.push({
            //   url: JSON.parse(res.data[0].imageUrl)[0]
            // });
            this.formData.remarks = res.data[0].remarks;
          }
        },
        false
      );
    },
    updateSysApplication() {
      this.post(
        "/operation/updateSysApplication",
        {
          id: this.bannerId,
          remarks: this.formData.remarks,
          name: "banner",
          imageUrl: JSON.stringify(this.formData.imageUrl)
        },
        res => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.getSysApplication();
          }
        },false
      );
    },
    medicalImgUpload(file) {
      this.formData.imageUrl.push(file.data.original);
    },
    medicalImgRemove(file) {
      this.formData.imageUrl.splice(this.formData.imageUrl.indexOf(file), 1);
    }
  }
};
</script>

<style lang="less" scoped>
</style>